<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04_基本选择器</title>
</head>

<body>
    <div id="div1" class="box">div1(class="box")</div>
    <div id="div2" class="box">div2(class="box")</div>
    <div id="div3">div3</div>
    <span class="box">span(class="box")</span>


    <ul>
        <li>AAAAA</li>
        <li title="hello">BBBBB(title="hello")</li>
        <li class="box">CCCCC(class="box")</1i>
        <li title="hello">DDDDDD(title="hello")</li>
    </ul>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        /*
        需求：
        1.选择id为div1的元素
        2.选择所有的div元素
        3.选择所有class属性为box的元素
        4.选择所有的div和span元素
        5.选择所有class属性为box的div元素
        */

        //1.
        //$('#div1').css('background', 'red')

        //2.
        //$('div').css('background', 'red')
        //3.
        //$('.box').css('background', 'red')
        //4.
        //$('div,span').css('background', 'red')
        //5.
        //$('div.box').css('background', 'red')
        //$('div.box').css('background', 'red')
    </script>
</body>

</html>